import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import './style.less'

class FromInput extends React.Component <IChildProps,void>{
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            value: '',
            isEdit : false,
            validate : 0,
            errorInfo : ''
        }
    }
    render() {
        return (
            <div>
                <div className="form-input padding5">
                    <div className="InputAddOn">
                        <span className="InputAddOn-item">{this.props.title}</span>
                        <input
                        id = {this.props.id}
                        pattern={this.props.pattern}
                        type={this.props.type}
                        style={{minWidth:'50px'}}
                        autoFocus={this.props.autoFocus}
                        className="InputAddOn-field"
                        disabled= {this.props.disabled}
                        maxLength={this.props.maxLength}
                        onFocus = {this.onFocus.bind(this)}
                        onBlur = {this.onBlur.bind(this)}
                        placeholder={this.props.placeholder}
                        onChange={this.ChangeHandle.bind(this)}
                        onKeyUp={this.KeyUpHandle.bind(this)}
                        value={this.state.value}/>
                        <div className="InputAddOn-item">
                            {/* {
                                this.state.isEdit == true ?
                                    <i className="iconfont icon-closecircle clear-btn" onClick={this.clearInput.bind(this)}></i> : ''
                            }*/}
                            {this.props.children}
                        </div>
                    </div>

                    
                </div>


                {
                    this.state.validate == 2? (
                        <div className="form-warning">
                            {this.state.errorInfo}
                        </div>
                    ): ''
                }
            </div>
        )
    }
    componentDidMount() {
        // 默认值
        this.setState({
            value: this.props.value || ''
        })
    }
    componentWillReceiveProps (nextProps) {
      this.setState({
        value: nextProps.value
      });
    }

    ChangeHandle(e) {
        // 监控变化
        this.setState({
            value: e.target.value
        })
        if (this.props.onChange) {
            this.props.onChange(e)
        }
        var str = e.target.value || ""
        // *** 父节点可以自定义校验规则
        if (this.props.changeRule) {
            str = this.props.changeRule(str);
        }
        if (this.props.type == 'bankCard' ) {
            var re = /^[\d\s]+$/
            if(str!="" && !re.test(str)){
                str = this.state.value
            }else{
                str=str.replace(/\s/g,'').replace(/(.{4})/g,"$1 ");
            }
        }
        // 限制最大长度
        if (this.props.maxLength && str.length>this.props.maxLength)  { 
            str = str.substring(0,this.props.maxLength)
        }
        // 去掉两边的空格
        str = str.trim();
        this.setState({
            value : str
        },function(){
            //解决部分安卓手机光标位置移动问题
            if (this.props.type == 'bankCard') {
                var dom = document.getElementById(this.props.id);
                this.setCursorPosition(dom);
            }
        })
        // 更新数据
        if (this.props.onChange) {
            this.props.onChange(str);
        }

    }
    KeyUpHandle(e) {
        
    }
    //设置光标位置
    setCursorPosition(elem) {
        var val = this.state.value
        var len = val.length
     
        // 超过文本长度直接返回
        setTimeout(function() {
            elem.focus()
            elem.setSelectionRange(len, len)   
        }, 10)
    }



    onFocus(e){
        // this.setState({
        //     isEdit : true
        // }) 
    }
    onBlur (e){
        var _this = this;
        if (this.props.rule && this.props.rule.length) {
            var validate = true;
            var errorInfo = ''
            //表单验证
            this.props.rule.forEach(function(rule){

                if (validate && rule.required && _this.state.value=="") {
                    validate = false
                    errorInfo = rule.message
                    return false
                }else if (validate && rule.min && _this.state.value.length < parseInt(rule.min)) {
                    validate = false
                    errorInfo = rule.message
                    return false
                }else if(validate && rule.max && _this.state.value.length > parseInt(rule.max)){
                    validate = false
                    errorInfo = rule.message
                    return false
                }else if(validate && rule.type && rule.type == 'phone'){
                    var re = /^1\d{10}$/
                    if(!re.test(_this.state.value)){
                        validate = false
                        errorInfo = rule.message
                    }
                } else if(validate && rule.validator){
                    rule.validator(_this.state.value,function(error){
                        if (error) {
                            validate = false
                            errorInfo = error
                        }
                    });
                    return false
                }
            })
            //设置提示信息
            validate === true ? 
            _this.setState({
                validate : 1,
                errorInfo : ''
            }) : 
            _this.setState({
                validate : 2,
                errorInfo : errorInfo
            })
            //执行父元素事件
            if (this.props.onBlur) {
                this.props.onBlur();
            }
        }
        
    }
    clearInput (e){
        this.setState({
            value : ' '
        })
    }
}

export default FromInput